<template>
    <div class="container user-list-container">
        <div class="operation-wrapper">
            <el-button
                type="primary"
                size="mini"
                :disabled="!authResult.auth_add"
                @click="editDialogVisble = true">新增</el-button>
            <el-button
                style="margin-right: 15px"
                type="primary"
                size="mini"
                :disabled="!authResult.auth_sync"
                @click="fnSync">同步</el-button>
        </div>
        <div class="content-wrapper">
            <el-table
                :data="userList"
                style="width: 100%">
                <el-table-column
                    prop="cate_name"
                    label="分类">
                    <template slot-scope="scope">
                        {{ scope.row.cate_name || '--' }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="server_url"
                    label="链接">
                    <template slot-scope="scope">
                        {{ scope.row.server_url || '--' }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="状态">
                    <template slot-scope="scope">
                        <!-- TODO 权限处理 -->
                        <el-switch
                            v-model="scope.row.status"
                            :disabled="!authResult.auth_status"
                            :active-value="1"
                            :inactive-value="0"
                            @change="setServiceStatus($event, scope.row.provider_no)" />
                    </template>
                </el-table-column>
                <el-table-column
                    prop="remark"
                    label="简介"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.intro || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            :disabled="!authResult.auth_edit"
                            @click="handleEditService(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 弹窗 新增/编辑 -->
        <el-dialog
            :title="editData.user_no ? '编辑' : '新增'"
            :visible.sync="editDialogVisble"
            @close="handleEditDialogClose"
            width="30%">
            <el-form
                ref="editForm"
                :model="editData"
                label-width="80px"
                label-position="left"
                size="small"
                :rules="editFormRules">
                <el-form-item
                    label="分类"
                    prop="cate_name">
                    <el-input
                        v-model.trim="editData.cate_name"
                        placeholder="请输入分类名" />
                </el-form-item>
                <el-form-item
                    prop="server_url"
                    label="链接">
                    <el-input
                        v-model.trim="editData.server_url"
                        placeholder="请输入链接" />
                </el-form-item>
                <el-form-item
                    prop="server_host_ips"
                    label="服务端ip(多个用','隔开)">
                    <el-input
                        v-model="editData.server_host_ips"
                        placeholder="" />
                </el-form-item>
                <el-form-item
                    prop="intro"
                    label="简介">
                    <el-input
                        v-model="editData.intro"
                        placeholder="请输入简介"
                        type="textarea" />
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer">
                <el-button @click="editDialogVisble = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="handleResolveSubmitUser">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
const MAP = {
    username: '用户名',
    true_name: '姓名',
    phone: '手机号',
    password: '密码',
    remark: '备注'
};

export default {
    data() {
        const validate = (rule, value, callback) => {
            if (!this.editData.user_no) {
                if (!value) {
                    return callback(new Error(`${MAP[rule.field]}不能为空`));
                }
            }
            callback();
        };

        return {
            authResult: {},
            userList: [],
            editDialogVisble: false,
            editData: {
                provider_no: '',
                cate_name: '',
                server_url: '',
                server_host_ips: '',
                intro: ''
            },
            editFormRules: {
                cate_name: [
                    { required: true, message: '请输入分类名', trigger: 'blur' }
                ],
                server_url: [
                    { required: true, message: '请输入服务链接', trigger: 'blur' }
                ],
                intro: [
                    { required: true, message: '请输入简介', trigger: 'blur' }
                ]
            },
        };
    },
    created() {
        this.$store.commit('SET_HEADER', [
            {
                title: '设置',
            },
            {
                title: '服务列表'
            }
        ]);
        this.authResult = this.$route.meta.authResult;
        this.getServiceList();
    },
    methods: {
        /** 获取用户列表 */
        getServiceList() {
            this.$post('/__local/system%5Cprovider%5Cget_list', {}, resp => {
                if (resp.code == 1) {
                    this.userList = resp.data.list;
                }
            });
        },

        /** 设置状态 */
        setServiceStatus(status, provider_no) {
            this.$post('/__local/system%5Cprovider%5Cset_status', {
                provider_no,
                status
            }, resp => {
                if (resp.code == 1) {
                    this.$message({
                        type: 'success',
                        message: '设置状态成功'
                    });
                } else {
                    this.getServiceList();
                    this.$message({
                        type: 'warning',
                        messaeg: resp.msg || '设置状态失败'
                    });
                }
            });
        },

        /** 编辑用户信息 */
        handleEditService(data) {
            this.$post('/__local/system%5Cprovider%5Cget', {
                provider_no: data.provider_no,
            }, resp => {
                if (resp.code == 1) {
                    this.editData = Object.assign({provider_no: data.provider_no}, resp.data);
                    this.editDialogVisble = true;
                } else {
                    this.$message({

                        type: 'warning',
                        messaeg: resp.msg || '获取失败'
                    });
                }
            });
        },

        /** 关闭用户弹窗后处理数据 */
        handleEditDialogClose() {
            this.editData = Object.assign({
                provider_no: '',
                cate_name: '',
                server_url: '',
                server_host_ips: '',
                intro: ''
            });
        },

        /** 新增/编辑用户前处理 */
        handleResolveSubmitUser() {
            if (this.editData.provider_no) {
                this.$refs.editForm.validate().then(valid => {
                    if (valid) {
                        this.submitEditUser();
                    }
                });
            } else {
                this.$refs.editForm.validate().then(valid => {
                    if (valid) {
                        this.submitAddService();
                    }
                });
            }
        },

        /** 同步 */
        fnSync(){
            this.$post('/__local/system%5Cprovider%5Csync', {}, resp => {
                if (resp.code == 1) {
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                    this.getServiceList();
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg || '同步失败'
                    });
                }
            });
        },

        /** 新增服务 */
        submitAddService() {
            this.$post('/__local/system%5Cprovider%5Cadd', this.editData, resp => {
                if (resp.code == 1) {
                    this.getServiceList();
                    this.editDialogVisble = false;
                    this.$message({
                        type: 'success',
                        message: '添加用户成功'
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg || '添加用户失败'
                    });
                }
            });
        },

        /** 编辑 */
        submitEditUser() {
            this.$post('/__local/system%5Cprovider%5Cset', this.editData, resp => {
                if (resp.code == 1) {
                    this.getServiceList();
                    this.editDialogVisble = false;
                    this.$message({
                        type: 'success',
                        message: '编辑成功'
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg || '编辑失败'
                    });
                }
            });
        },
    }
};
</script>


<style lang="less" scoped>
    .container {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    .operation-wrapper {
      display: flex;
      flex-direction: row-reverse;
      padding: 12px 23px;
      background-color: #fff;
    }
    .content-wrapper {
      flex: 1;
      margin: 15px;
      background-color: #fff;
      overflow: auto;
    }
    .el-table {
      color: #000;
      .el-button--text {
        margin-left: 0;
        margin-right: 10px;
        padding: 0;
      }
    }
    .el-pagination {
      float: right;
      margin-top: 20px;
      padding: 0;
    }
</style>